<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${path}/statics/layui/css/layui.css">

</head>
<body>
	
     <form class="layui-form" action="" style = "padding : 10px;">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="account" id="accountId"  lay-verify="required|account" lay-reqtext="用户名是必填项，岂能为空？" autocomplete="off" placeholder="请输入用户名" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="text" name="password" id="pwdId" value="111" lay-verify="required" lay-reqtext="密码是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
 
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">手机号</label>
      <div class="layui-input-inline">
        <input type="tel" name="mobile" id="mobileId" value="13278945612" lay-verify="required|phone" lay-reqtext="手机号是必填项，岂能为空？" autocomplete="off" class="layui-input">
      </div>
    </div>
  
  <!-- 单选框 -->
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked>
      <input type="radio" name="sex" value="女" title="女">
      <!--  <input type="radio" name="sex" value="禁" title="禁用" disabled="">  -->
    </div>
  </div>
  
    
    <!-- 地址 -->
   <div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-block">
      <input type="text" name="address" id="addressId" value="西安" lay-verify="required" lay-reqtext="" placeholder="请输入地址" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">管理菜单</label>
    <div class="layui-input-block">
    
    	<c:forEach items="${menuList}" var = "menu" >
    		<input type="checkbox" name="menuId" title="${menu.name}" value="${menu.id}">
    	 </c:forEach>
    </div>
  </div>

  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" name="submit" id="saveBtnID" lay-submit lay-filter="saveBtn">保存</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
  
	
<script src="${path}/statics/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['form','laydate','jquery','layer',"table"], function(){
  var form = layui.form;
  var $ = layui.jquery;
  var layer = layui.layer;
  var table = layui.table;
  var laydate = layui.laydate //日期

  
  form.verify({
	  account: function(value, item){ //value：表单的值、item：表单的DOM对象
	  
	    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
	    	
	      return '用户名不能有特殊字符';
	    }
	    if(/(^\_)|(\__)|(\_+$)/.test(value)){
	      return '用户名首尾不能出现下划线\'_\'';
	    }
	    if(/^\d+\d+\d$/.test(value)){
	      return '用户名不能全为数字';
	    }
	    var isTrue = false;
		 $.ajax({
			 url: "${path}/userCtl/checkAccount",
			 data: {account:value},
			 type: "post",
			 async:false,
			 success: function(res){
				 console.log(res)
				 if(res != 0){
					 isTrue = true;
				 }
			 }
		 })
		 if(isTrue){
			 return "用户名已占用";
		 }
	  }
	  
	  //我们既支持上述函数式的方式，也支持下述数组的形式
	  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
	});      
  
 

  
  
	  //监听表单的提交,首先会触发表单的验证,
	form.on('submit(saveBtn)', function(data){
		
	  
	  if($("input[name='menuId']:checked").length == 0){
	  		layer.msg("请选择菜单",{icon: 3});
	  		return false;
	  }
	  
	  $.post("${path}/userCtl/saveUser",$(data.form).serialize(),function(res){
		  
		  if(res == 0){
			  layer.msg("保存成功",{icon:1},function(){
				  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
				  parent.layer.close(index); //再执行关闭  
				  
				  //在父级自定义函数 , 在子级调用
				  parent.tools.reloadTable();
			  });
			  
		  }else{
			  layer.msg("系统繁忙,请稍后",{icon:2});
		  }
		
	  })
	  return false;//阻止layui同步表单提交
	});
 
}); 
</script>



</body>
</html>